import React, { Component } from 'react'

import DividerItem, { FormDivider } from '@/components/DividerItem'
import { Row, Col, Button } from 'antd';
import { KEYS_DETAILS, KEYS_CONTACT, KEYS_INFO, KEYS_FIRE } from '../enum';
import ListCard from '@/components/ListCard';

import styled from 'styled-components';
import Imgviewer from '@/components/ImgViewer';
import Link from 'umi/link';

interface P {
  data: {
    intro: string;
    x: string;
    y: string;
    image: string;
    bindStatus: '1' | '0',
    chemical: number
  }
}

export const ListCardRow = styled(Row)`
  border-right: 1px solid #eaeaea;
`
export const ListCardItem = styled(Col)`
  height: 80px;
  padding: 0px 25px;
  border: 1px solid #eaeaea;
  border-top: 0;
  border-right: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
`

export const ListCardItemSub = styled(ListCardItem)`
  height: 40px;
`

class Details extends Component<P> {

  private getValue = (
    KEYS: { name: string, key: string }[],
    data: {}
  ) => {
    return KEYS.map((item) => ({
      name: item.name,
      value: data[item.key]
    }));
  }

  render() {

    const { data } = this.props;
    
    const msg = this.getValue(KEYS_DETAILS, data);
    const contact = this.getValue(KEYS_CONTACT, data);
    const info = this.getValue(KEYS_INFO, data);
    const fire = data.bindStatus === '1' ? this.getValue(KEYS_FIRE, data) : [];

    // info.push({
    //   name: '单位坐标',
    //   value: `${data.x || ''}, ${data.y || ''}`
    // })
    const Tmp = () => (
      <>
        <ListCard data={info} />
        <ListCardRow>
          <ListCardItem style={{ background: '#F0F6FA', color: '#000000' }} span={3}>单位简介</ListCardItem>
          <ListCardItem style={{ color: '#000', overflowY: 'auto' }} span={13}>
            {data.intro || ''}
          </ListCardItem>
          <Col span={8}>
            <ListCardItem style={{ background: '#F0F6FA', color: '#000000' }} span={9}></ListCardItem>
            <ListCardItem style={{ color: '#000', overflowY: 'auto', alignItems: 'flex-start' }} span={15}>
             
            </ListCardItem>
          
           
          </Col>
        </ListCardRow>
      </>
    )

    const Tmp1 = () => (
      <>
        <ListCard data={msg} />
        <Link to="/data/owner/update" >
          <Button type="primary" style={{ marginTop: '50px', width: "80px" }}>编&nbsp;&nbsp;&nbsp;辑</Button>
        </Link>
      </>
    )

    const Info = DividerItem({ WrapperComponent: () => <Tmp />, icon: "reconciliation", title: '基础信息', height: 'auto' })
    const Contact = DividerItem({ WrapperComponent: () => <ListCard data={contact} />, icon: "idcard", title: '联系方式', height: 'auto' })
    const Fire = data.bindStatus === '1'
      ? DividerItem({ WrapperComponent: () => <ListCard data={fire} />, icon: "file-protect", title: '单位消防评定', height: 'auto' })
      : () => <></>

    const Msg = DividerItem({ WrapperComponent: () => <Tmp1 />, icon: "appstore", title: '详细信息', height: 'auto' });

    return (
      <>
        <Info />
        <Fire />
        <Contact />
        <Msg />
      </>
    )
  }
}

export default Details